@import url('~@/styles/animations.less');
@import url('~@/styles/mixin.less');

.first {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: url('~@/assets/report/department/bg.png') no-repeat center;
    background-size: cover;

    p {
        margin: 0;
        margin-bottom: 4px;
        font-size: 16px;
        line-height: 22px;
        span {
            font-weight: bold;
            font-size: 28px;
            line-height: 40px;
        }
    }

    &_center {
        align-self: center;
        width: 94px;
        height: 66px;
        margin-top: 16vh;
        .slide-in-fwd-center();
        img {
            width: 94px;
            height: 66px;
        }
    }
    &_man {
        align-self: center;
        width: 43px;
        height: 199px;
        margin-top: 43px;
    }
    &_wrapper {
        position: absolute;
        bottom: 30%;
        left: 24px;
        display: inline-block;
        overflow: hidden;
        .gradient-wrapper();
        &_content {
            color: #fff;
            .gradient-wrapper-content();
            h3 {
                margin: 0;
                font-size: 20px;
                line-height: 40px;
            }
            .depart {
                margin-bottom: 16px;
            }
        }
    }

    &_bottom {
        position: absolute;
        right: 24px;
        bottom: 18%;
        display: inline-block;
        overflow: hidden;
        .gradient-wrapper();

        &_content {
            color: #fff;
            .gradient-wrapper-content();
        }
    }
}
